<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="13">
        <el-input
          placeholder="请输入搜索内容"
          v-model="page.query"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchFn"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="primary" @click="addGoods">添加用户</el-button>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="primary">导出excel表格</el-button>
      </el-col>
    </el-row>
    <el-table :data="goods" border>
      <el-table-column prop="goods_name" label="商品名称"></el-table-column>
      <el-table-column prop="goods_price" label="商品价格"></el-table-column>
      <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
      <el-table-column prop="add_time" label="创建时间">
        <template slot-scope="scope">
          {{scope.row.add_time|timer}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <!--编辑---------------------------------------------------------------->
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <!--删除---------------------------------------------------------------->
          <el-button type="danger" icon="el-icon-delete" circle @click="delGoods(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 100, 300, 500, 700, 1000]"
      :current-page="page.pagenum"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getGoodFn,DeleteGoods } from "@/http/Goods";
export default {
  data() {
    return {

      goods: [],
      page: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      total: 0,
    };
  },
  methods: {
    // 搜索
    searchFn() {
      this.getGoods()
    },
    // 所有商品数据
    async getGoods() {
      // console.log(this.page);
      let res = await getGoodFn({
        query: this.page.query,
        pagenum: this.page.pagenum,
        pagesize: this.page.pagesize,
      });
      this.goods = res.data.goods;
      this.total = res.data.total;
      console.log(res);
    },
    addGoods(){
      this.$router.push('/Goods/add')
    },
    // 删除商品
    async  delGoods(val){
      // console.log(id);
      let res = await DeleteGoods(val.goods_id)
      this.getGoods()
    },
    // 分页
    handleSizeChange(val) {
      // console.log(val);
      this.page.pagesize = val;
      this.getGoods();
    },
    handleCurrentChange(val) {
      // console.log(val);
      this.page.pagenum = val;
      this.getGoods();
    },
    
  },

  mounted() {
    this.getGoods();
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  // 上右下左
  margin: 10px 0;
}
</style>